<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        派工
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form ba-add-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          label-width="160px"
          :rules="rules"
        >
          <el-form-item label="维护人员" prop="employeeName">
            <el-select
              v-model="state.form.employeeName"
              placeholder="请选择维护人员"
              @change="changeEmployee"
            >
              <el-option
                v-for="item in state.employeeOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useDictionary } from "@/store/backend/tool/dictionary";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance(); //mitt
const formRef = ref<FormInstance>();
const dict = useDictionary();
const order = inject("order") as any;
const staff = inject("staff") as any;

const state: {
  labelWidth: number;
  submitLoading: boolean;
  form: any;
  employeeOptions: anyObj[];
} = reactive({
  labelWidth: 160,
  submitLoading: false,
  form: {},
  employeeOptions: [], //售后人员列表
});

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();
const closeForm = () => {
  emits("update:modelValue", false);
};

const rules = reactive<FormRules>({
  dictCode: [{ required: true, message: "字典编码不能为空", trigger: "blur" }],
  dictLabel: [
    { required: true, message: "字典项标签不能为空", trigger: "blur" },
  ],
  dictType: [
    { required: true, message: "字典项类型不能为空", trigger: "blur" },
  ],
  dictValue: [{ required: true, message: "字典键值不能为空", trigger: "blur" }],
});

//获取售后人员
const getEmployee = () => {
  staff
    .getSingleAndListStaffAuto({ pageNum: 1, pageSize: 1000 })
    .then((res: any) => {
      console.log("售后人员", res);
      state.employeeOptions = tree(res.rows, "name", "name");
    });
};

const tree = (data: any, name: any, value: any) => {
  let arr: any[] = [];
  data.map((item: any) => {
    let obj: any = {};
    obj.name = item[name];
    obj.value = item[value];
    obj.id = item.id;
    obj.phone = item.phone;
    arr.push(obj);
  });
  console.log("下拉列表遍历", arr);
  return arr;
};

//选择售后人员
const changeEmployee = (e: any) => {
  console.log("选择售后人员", e);
  state.form.employeeName = e.name; //分配售后人员名称
  state.form.employeeId = e.id; //分配售后人员id
  state.form.employeePhone = e.phone; //分配售后人员电话
  state.form.status = "1";
};

const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      order.changWorkOrder(state.form).then((res: any) => {
        closeForm();
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

proxy.eventBus.on("editWorkOrder", (data: any) => {
  state.form = data; //获取售后人员
  console.log("state.form", data);
});

onMounted(() => {
  getEmployee();
  // state.form = dict.item;
});
</script>
<style lang="scss" scoped></style>
